<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico">

        <title>Ubold - Responsive Admin Dashboard Template</title>

        <!-- circliful css -->
        <link href="../plugins/jquery-circliful/css/jquery.circliful.css" rel="stylesheet" type="text/css" />

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script src="assets/js/modernizr.min.js"></script>


    </head>


    <body class="fixed-left" id="do-nicescrol">
        
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">设置</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="chart-other.html#">下拉菜单1</a>
                        <a class="dropdown-item" href="chart-other.html#">下拉菜单2</a>
                        <a class="dropdown-item" href="chart-other.html#">下拉菜单3</a>
                        <a class="dropdown-item" href="chart-other.html#">下拉菜单4</a>
                    </div>
                </div>

                <h4 class="page-title">其他图表</h4>
                <p class="text-muted page-title-alt">欢迎ubold管理面板 !</p>

            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="card-box">
                    <h4 class="m-t-0 header-title"><b>Jquery Knob</b></h4>
                    <p class="text-muted m-b-30 font-13">
                        Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.
                    </p>

                    <div class="row">
                        <div class="col-lg-6 col-xl-3 text-center">
                            <div class="p-20">
                                <input class="knob" data-width="150" data-height="150" data-fgColor="#5d9cec" data-displayInput=false value="35"/>
                                <h5 class="font-600 text-muted font-16">不显示input</h5>
                            </div>
                        </div>
                        <div class="col-lg-6 col-xl-3 text-center">
                            <div class="p-20">
                                <input class="knob" data-width="150" data-height="150" data-cursor=true data-fgColor="#fb6d9d" value="29"/>
                                <h5 class="font-600 text-muted font-16">光标模式</h5>
                            </div>
                        </div>
                        <div class="col-lg-6 col-xl-3 text-center">
                            <div class="p-20">
                                <input class="knob" data-width="150" data-height="150" data-min="-100" data-fgColor="#34d3eb" data-displayPrevious=true value="44"/>
                                <h5 class="font-600 text-muted font-16">显示以前的内容</h5>
                            </div>
                        </div>
                        <div class="col-lg-6 col-xl-3 text-center">
                            <div class="p-20">
                                <input class="knob" data-width="150" data-height="150" data-min="-100" data-fgColor="#5fbeaa" data-displayPrevious=true data-angleOffset=-125 data-angleArc=250 value="44"/>
                                <h5 class="font-600 text-muted font-16">角度偏移和圆弧</h5>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6 col-xl-3 text-center">
                            <div class="p-20">
                                <input class="knob" data-width="150" data-height="150" data-angleOffset="90" data-linecap="round" data-fgColor="#ffbd4a" value="35"/>
                                <h5 class="font-600 text-muted font-16">角度偏移</h5>
                            </div>
                        </div>
                        <div class="col-lg-6 col-xl-3 text-center">
                            <div class="p-20">
                                <input class="knob" data-width="150" data-height="150" data-min="-15000" data-displayPrevious=true data-max="15000" data-step="1000" value="-11000" data-fgColor="#7266ba"/>
                                <h5 class="font-600 text-muted font-16">5位值，1000步骤</h5>
                            </div>
                        </div>
                        <div class="col-lg-6 col-xl-3 text-center">
                            <div class="p-20">
                                <input class="knob" data-width="150" data-height="150" data-linecap=round data-fgColor="#4c5667" value="80" data-skin="tron" data-angleOffset="180" data-readOnly=true data-thickness=".1"/>
                                <h5 class="font-600 text-muted font-16">只读</h5>
                            </div>
                        </div>
                        <div class="col-lg-6 col-xl-3 text-center">
                            <div class="p-20">
                                <input class="knob" data-width="150" data-height="150" data-displayPrevious=true data-fgColor="#f05050" data-skin="tron" data-cursor=true value="75" data-thickness=".2"data-angleOffset=-125 data-angleArc=250 value="44"/>
                                <h5 class="font-600 text-muted font-16">角度偏移和圆弧</h5>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- End row -->


        <div class="row">

            <div class="col-md-12">
                <div class="card-box">
                    <h4 class="m-t-0 header-title"><b>简单的饼图</b></h4>
                    <p class="text-muted m-b-30 font-13">
                        Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.
                    </p>

                    <div class="row text-center">
                        <div class="col-lg-6 col-xl-3">
                            <div class="chart easy-pie-chart-1" data-percent="86">
                                <span class="percent">Nice</span>
                            </div>
                        </div>

                        <div class="col-lg-6 col-xl-3">
                            <div class="chart easy-pie-chart-2" data-percent="86">
                                <span class="percent"></span>
                            </div>
                        </div>

                        <div class="col-lg-6 col-xl-3">
                            <div class="chart easy-pie-chart-3" data-percent="86">
                                <span class="percent"></span>
                            </div>
                        </div>

                        <div class="col-lg-6 col-xl-3">
                            <div class="chart easy-pie-chart-4" data-percent="56">
                                <span class="percent"></span>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div> <!-- End row -->


        <div class="row">

            <div class="col-md-12">
                <div class="card-box">
                    <h4 class="m-t-0 header-title"><b>circliful图</b></h4>
                    <p class="text-muted m-b-30 font-13">
                        Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.
                    </p>

                    <div class="row text-center">
                        <div class="col-lg-6 col-xl-3">
                            <div class="circliful-chart m-b-30" data-dimension="180" data-text="35%" data-info="New Clients" data-width="20" data-fontsize="24" data-percent="35" data-fgcolor="#5fbeaa" data-bgcolor="#ebeff2" data-fill="#f4f8fb"></div>
                        </div>

                        <div class="col-lg-6 col-xl-3">
                            <div class="circliful-chart m-b-30" data-dimension="180" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="24" data-percent="35" data-fgcolor="#7266ba" data-bgcolor="#ebeff2"></div>
                        </div>

                        <div class="col-lg-6 col-xl-3">
                            <div class="circliful-chart m-b-30" data-startdegree="90" data-dimension="180" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="24" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#ebeff2"></div>
                        </div>

                        <div class="col-lg-6 col-xl-3">
                            <div class="circliful-chart m-b-30" data-startdegree="180" data-dimension="180" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="24" data-percent="35" data-fgcolor="#4c5667" data-bgcolor="#ebeff2"></div>
                        </div>

                    </div>


                    <div class="row text-center">
                        <div class="col-lg-6 col-xl-3">
                            <div class="circliful-chart" data-dimension="200" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="24" data-percent="35" data-fgcolor="#34d3eb" data-bgcolor="#ebeff2" data-type="half" data-fill="#f4f8fb"></div>
                        </div>

                        <div class="col-lg-6 col-xl-3">
                            <div class="circliful-chart" data-startdegree="45" data-dimension="200" data-text="50%" data-info="New Clients" data-width="30" data-fontsize="24" data-percent="50" data-fgcolor="#fb6d9d" data-bgcolor="#ebeff2" data-type="half" data-fill="#f4f8fb"></div>
                        </div>

                    </div>
                </div>
            </div>

        </div> <!-- End row -->

                   
        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

        <!-- EASY PIE CHART JS -->
        <script src="../plugins/jquery.easy-pie-chart/dist/easypiechart.min.js"></script>
        <script src="../plugins/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
        <script src="assets/pages/easy-pie-chart.init.js"></script>

        <!-- KNOB JS -->
        <!--[if IE]>
        <script type="text/javascript" src="../plugins/jquery-knob/excanvas.js"></script>
        <![endif]-->
        <script src="../plugins/jquery-knob/jquery.knob.js"></script>


        <script src="../plugins/jquery-circliful/js/jquery.circliful.min.js"></script>
        <script>
            $(function() {
                $(".knob").knob();
                $('.circliful-chart').circliful();
            });
        </script>


    </body>
</html>